<template>
  <view class="content pd-20 pb-40">
    <view class="list-block pb-20">
          <view class="item-block  pt-10">
            <view class="item-label mg-20"><text class="wraning-icon">*</text>主题名称:</view>
            <view class="input-block ml-20 mr-20">
              <input class="input pl-20"  v-model="params.name" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block  pt-10">
            <view class="item-label mg-20"><text class="wraning-icon">*</text>内容:</view>
            <view class="input-block ml-20 mr-20">
              <input class="input pl-20"  v-model="params.content" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block  pt-10">
            <view class="item-label mg-20"><text class="wraning-icon">*</text>例会时间:</view>
            <view class="input-block ml-20 mr-20" style="justify-content: flex-start;"  @click="openDateTimePicker">
              <u-icon name="calendar" color="#999999" size="36rpx"></u-icon>
              <view v-if="params.time" class="select-value ml-10">{{params.time}}</view>
              <view v-else class="ml-10">请选择</view>
              <!-- <input class="input pl-20"  v-model="params.time" placeholder="请输入..." placeholder-class="placeholder"/> -->
            </view>
          </view>
          <view class="item-block  pt-10">
            <view class="item-label mg-20"><text class="wraning-icon">*</text>例会地点:</view>
            <view class="input-block ml-20 mr-20">
              <input class="input pl-20"  v-model="params.address" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block  pt-10" @click="() => typeState = true">
            <view class="item-label mg-20"><text class="wraning-icon">*</text>会议类型:</view>
            <view class="input-block ml-20 mr-20 pl-20">
              <view v-if="params.typeName" class="select-value">{{params.typeName}}</view>
              <view v-else>请选择</view>
              <u-icon name="arrow-right" color="#999999" size="36rpx"></u-icon>
            </view>
          </view>
          <view class="item-block  pt-10" @click="() => levelState = true">
            <view class="item-label mg-20"><text class="wraning-icon">*</text>会议级别:</view>
            <view class="input-block ml-20 mr-20 pl-20">
              <view v-if="params.levelName" class="select-value">{{params.levelName}}</view>
              <view v-else>请选择</view>
              <u-icon name="arrow-right" color="#999999" size="36rpx"></u-icon>
            </view>
          </view>
          <view class="item-block  pt-10">
            <view class="item-label mg-20"></text>备注:</view>
            <view class="input-block ml-20 mr-20">
              <input class="input pl-20"  v-model="params.remark" placeholder="请输入..." placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="item-block1  pt-10">
              <view class="item-label pl-20"><text class="wraning-icon">*</text>现场图片</view>
              <view class="image-list">
              <u-upload :action="action" multiple :max-count="3" :file-list="fileList" @afterRead="afterRead" @delete="deleteImage"></u-upload>
              </view>
          </view>
          <view class="item-block1  pt-10">
              <view class="item-label pl-20"><text class="wraning-icon">*</text>签到表图片</view>
              <view class="image-list">
              <u-upload :action="action" multiple :max-count="3" :file-list="fileList1" @afterRead="afterRead1" @delete="deleteImage1"></u-upload>
              </view>
          </view>
          <view class="button-block mt-30">
              <button class="button-cancel" @click="routeBack()">取消</button>
              <button class="button-submit" @click="$u.throttle(submit, 1000)">提交</button>
          </view>
    </view>
          <u-picker :show="typeState" keyName="label" :columns="typeList" @cancel="pickerCancel('type')"  @confirm="pickerConfirm('type', $event)"></u-picker>
          <u-picker :show="levelState" keyName="label" :columns="levelList" @cancel="pickerCancel('level')"  @confirm="pickerConfirm('level', $event)"></u-picker>
          <u-datetime-picker
            :show="show"
            v-model="pickertime"
            mode="datetime"
            @confirm="dateTimeConfirm($event)"
            @cancel="() => show = false"
        ></u-datetime-picker>
    </view>
  </view>
</template>

<script>
import { creatSafeMeetingInfoApi } from "@/apis/teamsafety/index.js";
import {
  getSafeMeetingLevelApi,
  getSafeMeetingTypeApi,
} from "@/apis/teamsafety/comment.js";
import { getToken, getUserInfo } from "@/utils/auth.js";
import dayjs from "dayjs";
export default {
  data() {
    return {
      pickertime:Number(new Date()),
      show:false,
      returnState: false,
      typeState: false,
      levelState: false,
      levelList: [],
      typeList: [],
      params: {
        name: "",
        content: "",
        time: "",
        address: "",
        type: 0,
        typeName: "",
        level: 0,
        levelName: "",
        remark: "",
        sceneImage: "",
        signImage: "",
        appendix: "",
      },
      fileList: [],
      fileList1: [],
      action: this.uploadImageUrl,
    };
  },
  onLoad(options) {
    this.getSafeMeetingLevel();
    this.getSafeMeetingType();
  },
  onShow() {
    if (this.returnState) uni.navigateBack();
  },
  methods: {
    dateTimeConfirm(event){
      console.log(event)
      this.params.time = dayjs(event.value).format('YYYY-MM-DD HH:mm:ss')
      this.show = false
      console.log(this.params.time)
    },
    openDateTimePicker(){
      this.show = true
    },
    submit: function () {
      if (!this.authFormData()) return false;
      console.log(this.params)
      
      let params = JSON.parse(JSON.stringify(this.params));
      console.log(params)
      creatSafeMeetingInfoApi(params)
        .then((res) => {
          this.returnState = true;
          setTimeout(() => uni.navigateBack(), 500);
        })
        .catch((err) => console.warn(err));
    },
    pickerConfirm: function (type, event) {
      console.log(type,event)
      if (type == "type") {
        this.params[type] = Number(event.value[0].value);
      } else {
        this.params[type] = event.value[0].value;
      }
      this.params[`${type}Name`] = event.value[0].label;
      this[`${type}State`] = false;
    },
    pickerCancel: function (type) {
      this[`${type}State`] = false;
    },
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this.fileList.length;
      lists.map((item) => {
        this.fileList.push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this.fileList[fileListLen];
        if (result.status == "success") {
          this.fileList.splice(
            fileListLen,
            1,
            Object.assign(item, {
              status: result.status,
              message: "",
              url: result.url,
            })
          );
          fileListLen++;
        } else {
          this.fileList.splice(fileListLen, 1);
        }
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: this.uploadImageUrl,
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          header: {
            Authorization: `Bearer ${getToken()}`,
            "tenant-id": "1",
          },
          success: (res) => {
            let result = JSON.parse(res.data);
            if (result.code == 0) {
              this.params.sceneImage += result.data.url + ",";
              this.params.sceneImage.toString();
              resolve({ url: result.data.url, status: "success" });
            } else {
              uni.showToast({ title: "OSS服务器错误", icon: "none" });
              resolve({ url, status: "fail" });
            }
          },
          fail: () => uni.showToast({ title: "图片上传失败", icon: "none" }),
        });
      });
    },
    deleteImage(event) {
      // this.params.sceneImage.splice(event.index, 1);
      this.fileList.splice(event.index, 1);
    },
    async afterRead1(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this.fileList1.length;
      lists.map((item) => {
        this.fileList1.push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise1(lists[i].url);
        let item = this.fileList1[fileListLen];
        if (result.status == "success") {
          this.fileList1.splice(
            fileListLen,
            1,
            Object.assign(item, {
              status: result.status,
              message: "",
              url: result.url,
            })
          );
          fileListLen++;
        } else {
          this.fileList1.splice(fileListLen, 1);
        }
      }
    },
    uploadFilePromise1(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: this.uploadImageUrl,
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          header: {
            Authorization: `Bearer ${getToken()}`,
            "tenant-id": "1",
          },
          success: (res) => {
            let result = JSON.parse(res.data);
            if (result.code == 0) {
              this.params.signImage += result.data.url + ",";
              this.params.signImage.toString();
              resolve({ url: result.data.url, status: "success" });
            } else {
              uni.showToast({ title: "OSS服务器错误", icon: "none" });
              resolve({ url, status: "fail" });
            }
          },
          fail: () => uni.showToast({ title: "图片上传失败", icon: "none" }),
        });
      });
    },
    deleteImage1(event) {
      // this.params.signImage.splice(event.index, 1);
      this.fileList1.splice(event.index, 1);
    },
    routeBack: function () {
      uni.navigateBack();
    },
    authFormData: function () {
      let params = this.params;
      if (!params.name) {
        uni.showToast({ title: "请输入主题名称", icon: "none" });
        return false;
      }
      if (!params.content) {
        uni.showToast({ title: "请选择内容", icon: "none" });
        return false;
      }
      if (!params.time) {
        uni.showToast({ title: "请选择例会时间", icon: "none" });
        return false;
      }
      if (!params.address) {
        uni.showToast({ title: "请选择例会地点", icon: "none" });
        return false;
      }
      if (!params.typeName) {
        uni.showToast({ title: "请选择会议类型", icon: "none" });
        return false;
      }
      if (!params.levelName) {
        uni.showToast({ title: "请选择会议级别", icon: "none" });
        return false;
      }
      // if (!params.remark) {
      //   uni.showToast({ title: "请输入备注内容", icon: "none" });
      //   return false;
      // }
      if (this.fileList.length <= 0) {
        uni.showToast({ title: "请上传现场照片", icon: "none" });
        return false;
      }
      if (this.fileList1.length <= 0) {
        uni.showToast({ title: "请上传签到表照片", icon: "none" });
        return false;
      }
      return true;
    },
    getSafeMeetingLevel() {
      getSafeMeetingLevelApi()
        .then((res) => {
          this.levelList = [res];
        })
        .catch((err) => console.warn(err));
    },
    getSafeMeetingType() {
      getSafeMeetingTypeApi()
        .then((res) => {
          this.typeList = [res];
        })
        .catch((err) => console.warn(err));
    },
  },
};
</script>

<style>
page {
  background-color: #efefef;
}
.u-radio-group {
  align-items: center;
  justify-content: space-around;
}
.u-radio__text {
  font-size: 28rpx;
  line-height: 40rpx;
  color: #666666;
}
.u-radio-group .u-radio .u-radio__icon-wrap {
  width: 30rpx !important;
  height: 30rpx !important;
}
</style>

<style lang="scss" scoped>
.content {
  .list-block {
    background-color: #ffffff;
    border-radius: 10rpx;
    .title-block {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      line-height: 40rpx;
      font-weight: 500;
      color: #333333;
      .title-icon {
        width: 15rpx;
        height: 15rpx;
        border-radius: 100%;
      }
    }
    .item-block,
    .item-block1 {
      .item-label {
        font-size: 28rpx;
        line-height: 40rpx;
        color: #666666;
        display: flex;
        align-items: center;
        .wraning-icon {
          color: #fe0303;
          margin-right: 5rpx;
        }
      }
      .input-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64rpx;
        border: 1rpx solid #bbbbbb;
        border-radius: 8rpx;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #999999;
        .input {
          width: 500rpx;
          font-size: 28rpx;
          line-height: 40rpx;
          color: #333333;
        }
        .placeholder {
          font-size: 28rpx;
          line-height: 40rpx;
          color: #999999;
        }
        .select-value {
          color: #333333;
        }
      }
      .image-block {
        display: flex;
        align-items: center;
        .image-title {
          font-size: 28rpx;
          line-height: 40rpx;
          color: #666666;
          margin-right: 20rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .item-block1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .image-list {
        max-width: 530rpx;
      }
    }
    .button-block {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .button-cancel {
        width: 334rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26rpx;
        color: #ffffff;
        border-radius: 8rpx;
        background-color: #bbbbbb;
      }
      .button-cancel::after {
        border: none;
      }
      .button-submit {
        @extend .button-cancel;
        background-color: #3f99f7;
      }
      .button-submit::after {
        border: none;
      }
    }
  }
}
</style>
